<template>
  <div id="real-time-clock" class="clock">
    {{ formattedDateTime }}
  </div>
</template>

<script>
    export default {
        name: 'RealTimeClock',
        data() {
            return {
                dateTime: new Date()
            }
        },
        computed: {
            formattedDateTime() {
                const month = (this.dateTime.getMonth() + 1).toString().padStart(2, '0')
                const day = this.dateTime.getDate().toString().padStart(2, '0')
                const hours = this.dateTime.getHours().toString().padStart(2, '0')
                const minutes = this.dateTime.getMinutes().toString().padStart(2, '0')
                const seconds = this.dateTime.getSeconds().toString().padStart(2, '0')
                return `${month}-${day} ${hours}:${minutes}:${seconds}`
            }
        },
        mounted() {
            this.updateClock()
        },
        methods: {
            updateClock() {
                this.dateTime = new Date()
                setTimeout(this.updateClock, 1000)
            }
        }
    }
</script>

<style scoped>
    #real-time-clock {
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px;
        font-size: 26px;
        color: #ffffff;
        background-color: rgba(226, 121, 121, 0);
        border-radius: 5px;
        font-family: 'DS-Digital';
        /* 引入电子钟字体 */
    }
</style>